<template>
<el-popover
  placement="bottom-start"
  width="400"
  trigger="click">
  <el-input v-model="queryString" style="position: relative;" clearable placeholder="请输入逝者姓名" @clear="querySearch" @input.native="querySearch">
    <i slot="suffix" class="el-icon-search el-input__icon" />
  </el-input>
<el-table :data="gridData" @row-click="handleSelect">
  <el-table-column  property="deceased" label="逝者姓名"></el-table-column>
  <el-table-column  property="number" label="身份证"></el-table-column>
</el-table>

  <el-input slot="reference"  placeholder="点击选择逝者" :value ="getUserDisplay()" readonly>
    <i slot="prefix" class="el-icon-search el-input__icon" />
  </el-input>

</el-popover>
</template>
<script>
import {listDead} from "@/api/fm/dead";

export default {
  data() {
    return {queryString:"",
      id: null,
      deceased:null,
      number:null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        deceased: null
      },
      gridData: []
    };
  },
  props: {},
  methods: {
    querySearch()
    {
      if (this.queryString)
      {
        this.queryParams.deceased=this.queryString;
        listDead(this.queryParams).then((response) => {
          this.gridData = response.rows;
        }).catch((err) => {
          console.log(err)
        });
      }
    },
    handleSelect(row, event, column)
    {
       this.id = row.id;
       this.deceased = row.deceased;
       this.number=row.number;
       this.$emit("input", this.id);
      document.body.click()
    },
    getUserDisplay()
    {
      if(this.deceased)
      {
        return this.deceased + " (身份证：" + this.number + ")";
      }
      return "";
    },
    reset(){
      this.id = null;
      this.deceased=null;
      this.number=null;
    }
  }
};
</script>
